<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, FormRules } from 'element-plus';
import { registerApi } from '@/pages/login/apis'; // 导入注册API

const router = useRouter();

const registerFormRef = ref();

const loading = ref(false);

const registerFormData = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '', // 前端确认密码字段
});

const validateConfirmPassword = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== registerFormData.password) {
    callback(new Error('两次输入的密码不一致！'));
  } else {
    callback();
  }
};

const registerFormRules: FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword, trigger: 'blur' },
  ],
};

async function handleRegister() {
  const valid = await registerFormRef.value?.validate();
  if (!valid) {
    ElMessage.error('表单校验不通过');
    return;
  }

  loading.value = true;
  try {
    await registerApi({
      username: registerFormData.username,
      email: registerFormData.email,
      password: registerFormData.password,
    });
    // ElMessage.success('注册成功！请前往登录页。'); // Commented out per user request
    router.push('/login'); // 注册成功后跳转到登录页
  } catch (error: any) {
    console.error('注册失败:', error.response?.data || error);
    // ElMessage.error(error.response?.data?.msg || error.message || '注册失败'); // Commented out per user request
  } finally {
    loading.value = false;
  }
}

</script>

<template>
  <div class="register-container">
    <div class="register-card">
      <div class="title">注册账号</div>
      <div class="content">
        <el-form
          ref="registerFormRef"
          :model="registerFormData"
          :rules="registerFormRules"
          @keyup.enter="handleRegister"
        >
          <el-form-item prop="username">
            <el-input v-model.trim="registerFormData.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model.trim="registerFormData.email" placeholder="邮箱" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model.trim="registerFormData.password" placeholder="密码" show-password />
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input type="password" v-model.trim="registerFormData.confirmPassword" placeholder="确认密码" show-password />
          </el-form-item>
          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleRegister">
            注 册
          </el-button>
        </el-form>
        <div class="mt-15px text-center">
          <el-button link type="primary" @click="router.push('/login')">已有账号？去登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;

  .register-card {
    width: 480px;
    max-width: 90%;
    border-radius: 20px;
    box-shadow: 0 0 10px #dcdfe6;
    background-color: var(--el-bg-color);
    overflow: hidden;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      font-size: 24px;
      font-weight: bold;
    }
    .content {
      padding: 20px 50px 50px 50px;
      .el-button {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
}
</style>